<template>
  <div>
    <el-row type="flex" justify="center" style="margin-top: 20px">
      <el-col :span="4">
        <!-- 左侧logo -->
        <a href="#">
          <img src="../../assets/frontdesk/images/hot_img1.png" alt="" />
        </a>
      </el-col>
      <el-col :span="20">
        <!-- 两行，第一行是topbigNews，第二行是两个小news -->
        <!-- <el-row type="flex" justify="center" class="topbigNews">
          <el-col :span="24">
              <a href="#">从奥运会到全运会，运动员带来的“正确审美”会成为时代主流吗？</a>
          </el-col>
        </el-row> -->
        <el-row type="flex" justify="center" class="topbigNews">
          <el-col :span="24">
            <!-- 样式控制：当高亮新闻的标题字超过20时，多余的字数用。。。代替 -->
            <a :href="'/#/News/' + top3News0Id">{{ top3News0Title.slice(0,29) }}</a>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" class="topsmallNews">
          <el-breadcrumb separator="|">
            <!-- <el-breadcrumb-item v-for="(item,index) in top3News.slice(1,3)" :key="index">
              <a :href="'/#/News/'+item.id">{{item.title}}</a>
            </el-breadcrumb-item> -->
            <el-breadcrumb-item>
              <!-- 样式控制：当小标题新闻超过20个字时：截去多余的字符 -->
              <a :href="'/#/News/' + top3News1Id">{{ top3News1Title.slice(0,29) }}</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <a :href="'/#/News/' + top3News2Id">{{ top3News2Title.slice(0,29) }}</a>
            </el-breadcrumb-item>

            <el-breadcrumb-item>
              <a :href="'/#/NewsCategory/' + newsCategoryId">【更多】</a>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>
      </el-col>
    </el-row>
    <!-- <div>{{gettop3News}}</div> -->
    <!-- <div>{{$store.getters.gettop3News}}</div> -->
  </div>
</template>

<style scoped>
a {
  text-decoration: none;
  text-align: center;
}
a:hover {
  color: rgb(191, 64, 56) !important;
}
.topbigNews a {
  font-size: xx-large;
  font-weight: 600;
  margin-top: 20px;
  color: #000;
  display: block;
  width: 100%;
  height: 50px;
  overflow: hidden;
}

.topsmallNews {
  margin-top: 10px;
}
.topsmallNews a {
  font-weight: 400;
}
</style>


<script>
import { mapGetters } from "vuex";

import News from "@/api/News.js";
let news = new News();
export default {
  data: () => ({
    top3News: [],
    newsCategoryId: "",

    top3News0Id: "",
    top3News0Title: "",

    top3News1Id: "",
    top3News1Title: "",
    
    top3News2Id: "",
    top3News2Title: "",
  }),
  computed: {
    ...mapGetters(["gettop3News"]),
  },
  // mounted:async  function (params) {
  //    this.top3News=await  this.$store.getters.gettop3News;
  //   // console.log(this.top3News.slice(1));
  // },
  async beforeMount() {
    this.top3News = (await news.GetTop3News()).data;
    // console.log(this.top3News);
    this.newsCategoryId = "42590c49-a536-41d8-1272-08d9ab5fcd4c";

    this.top3News0Id = this.top3News[0].newsId;
    this.top3News0Title = this.top3News[0].newsTitle;
    this.top3News1Id = this.top3News[1].newsId;
    this.top3News1Title = this.top3News[1].newsTitle;
    this.top3News2Id = this.top3News[2].newsId;
    this.top3News2Title = this.top3News[2].newsTitle;
  },
};
</script>